<template>
	<view class="content">
		<view class="avatarWrapper">
			<view class="avatar">
				<image class="img" src="../../static/login/title8.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" v-model="userName" placeholder="请输入账号" />
			</view>
			<view class="inputWrapper">
				<input class="input" type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="longinBtn">
				<text class="loginBtnText" o @click="login()">登录</text>
				<!-- <button class="loginBtnText" open-type="getUserInfo">登录</button> -->
			</view>
			<view class="registBtn" @click="toRegist()">
				<text>注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userName: "llm",
				password: "123"
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				/* var formdata = e.detail.value
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value)) */
				/* var userName = this.userName;
				var password = this.password; */
				console.log("-----userName----", this.userName);
				console.log("-----password----", this.password);
				uni.request({
					//在宿舍连华为wifi的地址
					url: "http://192.168.43.148:8090/user/existUser",
					//url: "http://192.168.43.148:8090/user/existUser",//基地地址
					//在利元亨地址 url: "http://192.168.1.5:8090/user/existUser",
					
					/* content-Type:'application/x-www-form-urlencoded', */
					/* content-Type */
					//请求的参数

					header: {
						//'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',如果后台没有使用json格式接收，使用这种方式
						'content-type': 'application/json', //如果后台使用 @Reuqestbody的，使用这种方式
						//application/json
					},
					data: {
						"userName": this.userName,
						"password": this.password
					},
					//请求类型，默认get
					method: "POST",
					//数据类型，默认json
					dataType: "json",
					//超时时间，单位ms，默认60000ms
					timeout: 60000,
					//成功之后的回调函数
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							uni.setStorage({
								key:"userId",
								data: res.data.data.userId
							})
							console.log("-----校验成功----");
							uni.switchTab({
								url: "../index/index"
							})
							console.log(this.userName + "点击登录了");
						} else {
							console.log("-----校验失败----");
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								mask:true,
								position:"top"
							})
							this.userName = "";
							this.password = "";
						}
					},
					//接口调用失败的回调函数
					fail: function() {

					},
					//接口调用完成的回调函数
					complete: function() {

					}
				})



			},
			toRegist() {
				uni.navigateTo({
					url: "./register"
				})
				console.log("点击注册了");
			}
		}
	}
</script>

<style>
	.content {
		background-color: #DD524D;
		width: 100vw;
		height: 100vh;
	}

	.avatarWrapper {
		/* display: flex; */
		background-color: #DD524D;
		width: 100vw;
		height: 30vh;
	}

	.avatar {
		width: 200upx;
		height: 200upx;
	}

	/* .avatar .img{
		width: 100%;
	} */
	.form {
		padding: 0 100upx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.longinBtn {
		width: 100%;
		height: 80upx;
		background: #b50e30;
		/* 圆角 */
		border-radius: 50upx;

		/* text-align: center;
		box-sizing: border-box;
		padding: 0 20px; */
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.longinBtn .loginBtnText {
		color: #FFFFFF;
	}

	.registBtn {
		width: 100%;
		height: 80upx;
		text-align: center;
		color: #eaf6e9;
		font-size: 15px;
		margin-top: 20px;
		background: #b50e30;
		border-radius: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
